<template>
  <div class="map-demo1">
    <van-search
      v-model="keyword"
      clearable
      autofocus
      show-action
      placeholder="请输入位置"
      id="searchId"
      @search="onSearch"
    >
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>

    <div id="container1"></div>
    <div
      class="info-window"
      style="width: 80vw"
      v-show="infoWindowShow"
      ref="infoWindowRef"
    >
      <van-cell-group>
        <van-cell title="名称" :value="poi.name" />
        <van-cell
          title="详细地址"
          :value="`${poi.cityname}-${poi.cityname}-${poi.name}`"
        />
        <van-cell title="电话" :value="poi.tel" />
        <van-cell title="类型" :value="poi.type" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts" name="MapDemo1">
// @ts-nocheck
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, onMounted, nextTick } from "vue";
import { showNotify } from "vant";
window._AMapSecurityConfig = {
  securityJsCode: "jscode",
};
const keyword = ref("");
const onSearch = async (val) => {
  if (!val) return showNotify({ type: "warning", message: "请先输入搜索词" });
  const r = await handlePlaceSearch(val);
  console.log("r", r);
};
const onClickButton = async () => {
  if (!keyword.value)
    return showNotify({ type: "warning", message: "请先输入搜索词" });
  const r = await handlePlaceSearch(keyword.value);
  console.log("r", r);
};
let AMap = null;
let map = null;
let marker = null;
let infoWindow = null;
let autoComplete = null; // Autocomplete进行联想输入。
let placeSearch = null; //poi
const poi = ref({}); //弹窗里面数据
const infoWindowRef = ref(); //infoWindow弹窗ref
const infoWindowShow = ref(false); //控制是否弹窗显示

const initMap = async () => {
  AMap = await AMapLoader.load({
    key: "67399b84761c2d0aed556b4f7f1dd39f", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], //AutoComplete调用每天只有20次，好坑
    resizeEnable: true,
    Loca: {
      version: "2.0.0",
    }, // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).catch((err) => {
    showNotify("地图加载失败,请重试");
  });
  map = new AMap.Map("container1", {
    zoom: 8, //初始化地图级别
    center: [114.304569, 30.593354], //初始化地图中心点位置
    mapStyle: "amap://styles/fresh", //设置地图的显示样式
  });
  return map;
};

//注册地图点击事件
const initEvent = () => {
  map.on("click", closeInfoWindow);
};
const closeInfoWindow = (e) => {
  infoWindowShow.value = false;
};

const initInfoWindow = () => {
  infoWindow = new AMap.InfoWindow({
    isCustom: true, //自定义弹窗
    autoMove: true,
    offset: { x: 0, y: -30 },
    anchor: "bottom-center",
  });
};

const initAutoComplete = () => {
  autoComplete = new AMap.AutoComplete({
    city: "",
    citylimit: true,
    input: "searchId",
  });

  autoComplete.search("wuhan", (a, b) => {
    if (b === "USER_DAILY_QUERY_OVER_LIMIT")
      showNotify({
        type: "warning",
        message: "注意:搜索联想达到当日调用量最大限制",
      });
  });
  /**  autoComplete鼠标点击或者回车选中某个POI信息时触发此事件 */
  autoComplete.on("select", autoCompleteSelect);
};

const initPlaceSearch = () => {
  placeSearch = new AMap.PlaceSearch({
    pageSize: 5, // 单页显示结果条数
    pageIndex: 1, // 页码
    children: 0, //不展示子节点数据
    map: map, // 展现结果的地图实例
    autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
  });
  placeSearch.on("markerClick", handlePlaceSearchMarkerClick);
};

/**
 * autoComplete鼠标点击或者回车选中某个POI信息时触发此事件
 * @param e
 */
const autoCompleteSelect = (e) => {
  console.log("e", e);
  const { adcode, name } = e.poi;
  keyword.value = name;
  placeSearch.setCity(adcode); // 设置查询城市, 支持cityname（中文或中文全拼）、citycode、adcode
  handlePlaceSearch(name);
};

/**
 * placeSearch搜索功能，
 * @param val  搜索关键词
 */
const handlePlaceSearch = (val) => {
  return new Promise((resolve, reject) => {
    placeSearch.search(val, (result, data) => {
      if (result !== "result") {
        resolve(data);
      } else reject(data);
    });
  });
};

const handlePlaceSearchMarkerClick = (data) => {
  poi.value = data.data;
  infoWindowShow.value = true;
  nextTick(() => {
    infoWindow.setContent(infoWindowRef.value);
    infoWindow.open(map, data.marker.getPosition());
  });
};

onMounted(async () => {
  await initMap();
  initEvent();
  initInfoWindow();
  initAutoComplete();
  initPlaceSearch();
});
</script>

<style scoped>
#container1 {
  padding: 0px;
  margin: 0px;
  width: 100vw;
  height: 60vh;
}
</style>
